<template>
  <el-container>
    <MapLayer />
    <el-aside width="320px">
      <div class="help">如何使用?</div>
      <div class="title">瓦片地址</div>
      <el-select v-model="currentTile.value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.name"
          :value="item.value">
        </el-option>
      </el-select>
    </el-aside>
  </el-container>
</template>

<script setup>
import { defineProps, reactive } from "vue";
import MapLayer from './components/MapLayer.vue';
import {downloadTile} from './core/download';

const options = [
  {value: "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", name: "高德"},
  {value: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}", name: "深蓝"},
];

const currentTile = reactive({value: options[0].value});

// This starter template is using Vue 3 experimental <script setup> SFCs
// Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
</script>

<style scope>
*{
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
#app {
  display: flex;
  height: 100%;
}
#sideBar{
  width: 320px;
}
</style>
